<template>
  <div>
    <div class="list">
      <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter" style="justify-content: space-between">
            <div>Store Name： {{ storeInfo.name }}</div>
          </div>
          <div class="cardContent">
            <el-row v-if="!topChange">
              <el-col :span="8" class="col size2">
                <div class="qualityImg">
                  <img :src="storeInfo.head" alt="" srcset="" />
                </div>
              </el-col>
              <el-col :span="16" class="col size2">
                <el-col :span="24" class="col size2">
                  <div>Location Area： {{ storeInfo.region }}</div>
                </el-col>
                <el-col :span="24" class="col size2">
                  <div>Address： {{ storeInfo.address }}</div>
                </el-col>
                <el-col :span="24" class="col size2">
                  <div>Account: {{ storeInfo.account }}</div>
                </el-col>
                <el-col :span="24" class="col size2">
                  <div>Password： {{ storeInfo.password }}</div>
                </el-col>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="8" class="col size2">
                <div class="left">
                  <div class="upBOx" @click="upImgFn" v-if="!upImg">
                    <div class="upImg center">+</div>
                    <input
                      ref="inputFile"
                      type="file"
                      style="display: none"
                      @change="handleFileUpload"
                    />
                  </div>
                  <div v-else class="imgBox">
                    <img :src="upImg" alt="" />
                    <div class="Mask center">
                      <div @click="magnifyFn">
                        <el-icon color="white"><Search /></el-icon>
                      </div>
                      <div @click="deleteImgFn">
                        <el-icon color="red"><Delete /></el-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="16" class="col size2">
                <el-col :span="24" class="col size2">
                  <div style="display: flex">
                    <div style="flex: 1">Location Area：</div>
                    <el-input style="flex: 4" v-model="addForm.region" placeholder="Please input" />
                  </div>
                </el-col>
                <el-col :span="24" class="col size2">
                  <div style="display: flex">
                    <div style="flex: 1">Address：</div>
                    <el-input
                      style="flex: 4"
                      v-model="addForm.address"
                      placeholder="Please input"
                    />
                  </div>
                </el-col>
                <el-col :span="24" class="col size2">
                  <div style="display: flex">
                    <div style="flex: 1">Account Username：</div>
                    <el-input
                      style="flex: 3"
                      v-model="addForm.account"
                      placeholder="Please input"
                    />
                  </div>
                </el-col>
                <el-col :span="24" class="col size2">
                  <div style="display: flex">
                    <div style="flex: 1">Password：</div>
                    <el-input
                      style="flex: 4"
                      v-model="addForm.password"
                      placeholder="Please input"
                    />
                  </div>
                </el-col>
              </el-col>
            </el-row>
          </div>
          <div class="button Consigness" @click="changeStoreFn">Edit</div>
        </div>
      </div>
      <!-- <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter" style="justify-content: space-between">
            <div>Store location</div>
          </div>
          <div class="cardContentLocation">
            <div id="map-id" style="height: 800px"></div>
          </div>
        </div>
      </div> -->
      <!-- <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter" style="justify-content: space-between">
            <div>Account Information</div>
          </div>
          <div class="cardContentAccount">
            <el-row v-if="!topChange2">
              <el-col :span="24" class="col size2">
                <div>Location Area： {{ storeInfo.region }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Account Username： {{ storeInfo.account }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Password： {{ storeInfo.password }}</div>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24" class="col size2">
                <div style="display: flex">
                  <div style="flex: 1">Location Area：</div>
                  <el-input style="flex: 7" v-model="addForm.region" placeholder="Please input" />
                </div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div style="display: flex">
                  <div style="flex: 1">Account Username：</div>
                  <el-input style="flex: 6" v-model="addForm.account" placeholder="Please input" />
                </div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div style="display: flex">
                  <div style="flex: 1">Password：</div>
                  <el-input style="flex: 8" v-model="addForm.password" placeholder="Please input" />
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="button Consigness" @click="changeStoreFn2">Edit</div>
        </div>
      </div> -->
      <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter">
            <div>Tips</div>
            <div></div>
          </div>
          <div class="cardContentTips">
            <div class="size2">
              1.For helping customers navigate to your store, please fill in the detailedaddress as
              soon as possible.<br />2.When logging in to the store interface, please use the store
              name orphone number as the login account.<br />3.The store supports multiple devices
              logging in at the same time. Toprotect the security of your store account, please keep
              your accountand password safe. <br />4.lf you forget your login password, please
              contact the platform for
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 放大图片 -->
    <el-dialog
      class="el-dialog__body2"
      v-model="dialogVisibleMagnifyFn"
      :show-close="false"
      :before-close="handleClose"
    >
      <div class="bakImg">
        <img :src="upImg" alt="" srcset="" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入leaflet
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
// 引入插件
import 'leaflet.chinesetmsproviders'
import icon from 'leaflet/dist/images/marker-icon.png'
import { uploadAvatar, storeChange, storeDetils } from '@/http/api/my.js'
import { Delete, Search } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
onMounted(() => {
  getData()
  geolocationFn()

})
let dialogVisibleMagnifyFn = ref(false)
const magnifyFn = () => {
  dialogVisibleMagnifyFn.value = true
}
const geolocationFn = () => {

  navigator.geolocation.getCurrentPosition(position => {
    console.log('当前地理位置', position.coords)
    if (position.coords) {
      longitude.value = position.coords.longitude
      latitude.value = position.coords.latitude
    }
  })
  getMap()
}
const getMap = (longitude, latitude) => {
  // 初始化地图，并设置地理中心和缩放倍数
  // let map = L.map('map-id', {
  //   center: [39.90, 116.39],
  //   zoom: 12
  // })
  // // 添加瓦片（Tile）图层
  // L.tileLayer.chinaProvider('GaoDe.Normal.Map', { maxZoom: 18, minZoom: 5 }).addTo(map)
  // L.Marker.prototype.options.icon = L.icon({
  //   iconUrl: icon,
  //   iconAnchor: [10, 41]
  // })
  // L.marker([39.90, 116.39]).addTo(map)
}
let storeInfo = reactive({})
let formData = reactive({})
let inputFile = ref(null)
let upImg = ref('')
const upImgFn = () => {
  inputFile.value.addEventListener('change', async function (event) {
    var files = event.target.files[0]
    const formData = new FormData()
    //files 文件信息
    formData.append("uploadFiles", files)
    //提交的其他字段
    // 发送ajax请求
    const res = await uploadAvatar(formData)
    addForm.head = res.image_url
    upImg.value = res.image_url

  })
  // 将input添加到文档中
  // document.body.appendChild(input);
  inputFile.value.click()
}
let topData = reactive({})
let topChange = ref(false)
let topChange2 = ref(false)
const getData = async () => {
  const regex = /^\[.*\]$/
  let storeInfoData = JSON.parse(localStorage.getItem('storeInfo'))

  let res = await storeDetils({ id: storeInfoData.id })
  if (regex.test(res.res.region)) {
    console.log(111)
    res.res.region = JSON.parse(res.res.region).join(',')
  }

  Object.assign(storeInfo, res.res)
}
let addForm = reactive({})
const changeStoreFn = async (number) => {
  topChange.value = !topChange.value
  if (topChange.value) {
    Object.assign(addForm, storeInfo)
  } else {
    delete addForm.create_time
    delete addForm.upDate
    const res = await storeChange(addForm)
    getData()
  }
}
const changeStoreFn2 = async (number) => {
  topChange2.value = !topChange2.value
  if (topChange2.value) {
    Object.assign(addForm, storeInfo)
  } else {
    delete addForm.create_time
    delete addForm.upDate

    await storeChange(addForm)
    getData()
  }
}
const deleteImgFn = () => {
  upImg.value = ''
  addForm.head = ''
}
</script>

<style lang="scss" scoped>
.listBox {
  width: 100%;
  margin-top: 45px;
  .card {
    width: 1800px;
    border-radius: 20px;
    overflow: hidden;
    background: #1a1c1d;
    position: relative;
    .cardTop {
      height: 100px;
      width: 100%;
      background: #ffdd00;
      padding: 0 20px;
      font-weight: bold;
      color: black;
    }
    .cardContent {
      padding: 40px 20px;
      font-size: 24px !important;
      color: white;
      height: 500px;
    }
    .cardContentTips {
      padding: 40px 20px;
      font-size: 24px !important;
      color: white;
      height: 300px;
    }
    .cardContentLocation {
      font-size: 24px !important;
      color: white;
      height: 300px;
    }
    .cardContentAccount {
      padding: 40px 20px;
      font-size: 24px !important;
      color: white;
      height: 300px;
    }
  }
}
.listBotton {
  width: 100%;
  .botton {
    width: 170px;
    height: 70px;
    background: #ffdd00;
    font-weight: bold;
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: black;
    margin-top: 20px;
  }
  .botton:active {
    background: black;
    color: white;
  }
}
.AddVehiclenCard {
  width: 1800px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1c1d;
  .AddVehiclenCardTop {
    height: 100px;
    width: 100%;
    background: #ffdd00;
    font-size: 24px;
    padding: 0 20px;
    font-weight: bold;
    color: black;
  }
}
.AddVehiclenCardContent {
  display: flex;
  padding: 10px;
  .left {
    margin-right: 30px;
    margin-left: 50px;
  }
}
.upImg {
  background: #3c3c3c;
  width: 260px;
  height: 260px;
  border-radius: 20px;
  font-size: 50px;
  cursor: pointer;
}

.imgBox {
  width: 260px;
  height: 260px;
  border-radius: 20px;
  position: relative;
  left: 0;
  top: 0;
  img {
    width: 100%;
    height: 100%;
  }
  .Mask {
    background: black;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    font-size: 30px;
  }
  .Mask:hover {
    opacity: 0.6;
  }
  cursor: pointer;
}

.bakImg {
  width: 800px;
  height: 800px;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-dialog__body2 {
  width: 800px !important;
}
::v-deep .el-form-item__label {
  font-size: 30px;
  color: white;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ffdd00;
  border: #ffdd00;
}
::v-deep .el-radio__input .is-checked {
  color: white !important;
  font-size: 24px;
}
.col {
  width: 100%;
  height: 40px;
  margin-top: 20px;
}
::v-deep .el-radio__label {
  color: white !important;
  font-size: 24px;
}
::v-deep .el-input {
  height: 40px;
}
::v-deep .el-input__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
.inpute1 {
  width: 800px;
}
.inpute2 {
  width: 1300px;
}

.cofimButton {
  width: 220px;
  height: 70px;
  background: #ffdd00;
  border-radius: 20px;
  font-size: 30px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.cofimButton:active {
  background: black;
  color: white;
}
.qualityImg {
  width: 550px;
  height: 380px;
  border: 1px solid #ffdd00;
  img {
    width: 100%;
    height: 100%;
  }
}
.button {
  width: 180px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  right: 50px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 22px;
  color: black;
}
.Consigness {
  background: #ffdd00;
}
.Rejection {
  background: #ff1f1f;
}
.rdioSelect {
  margin-top: 50px;
  margin-left: 50px;
  margin-bottom: 50px;
  .rdio {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffdd00;
    margin-right: 20px;
  }
  .rdio2 {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    margin-right: 20px;
  }
}
.inputSerachBox {
  padding-left: 60px;
  position: relative;
  cursor: pointer;
}
.inputSerachBox2 {
  cursor: pointer;
  width: 750px;
  height: 70px;
  border-radius: 20px;
  background: white;
}
.blackCircle {
  background: black;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: absolute;
  left: 720px;
  top: 50%;
  transform: translateY(-50%);
}
.RigthIcon {
  font-size: 25px;
}
.upBOx {
  width: 550px;
  height: 370px;
  .upImg {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.imgBox {
  width: 550px;
  height: 370px;

  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-input {
  height: 40px;
}
::v-deep .el-input__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
::v-deep .el-input__inner {
  color: white;
  font-size: 22px;
}
::v-deep .el-select__selected-item {
  color: white;
  font-size: 22px;
}
</style>